{{template "admin/header.html"}}
<title>Login - gpress</title>
<link rel="stylesheet" type="text/css" href="{{basePath}}admin/css/login.css">
<script type="text/javascript" src="https://cdn.staticfile.org/js-sha3/0.8.0/sha3.min.js"></script>
<script src="{{basePath}}admin/js/longbow.slidercaptcha.min.js"></script>
<link href="{{basePath}}admin/css/font-awesome.min.css" rel="stylesheet">
<link href="{{basePath}}admin/css/slidercaptcha.min.css" rel="stylesheet" />

</head>
<body>
<section class="hero is-success is-fullheight">
	<input type="hidden" id="message" value="{{.message}}">
	<div class="hero-body">
		<div class="container has-text-centered">
			<div class="column is-4 is-offset-4">
				<h3 class="title has-text-black">登录</h3>
				<hr class="login-hr">
				<div class="box">

					<figure class="avatar">
						<img src="{{basePath}}public/logo.png">
					</figure>

					<form id="loginForm" action="{{basePath}}admin/login" method="post" onsubmit="encrypt();">
						<div class="field">
							<div class="control">
								<input class="input is-large" name="account" type="text" placeholder="请输入账号"
									   autofocus="">
							</div>
						</div>

						<div class="field">
							<div class="control">
								<input class="input is-large" id="password" name="password" type="password"
									   placeholder="请输入密码">
							</div>
						</div>
						<div id="captcha" ></div>
									<div class="field">
										<label class="checkbox">
											<input type="checkbox">记住我
										</label>
									</div>
						<button class="button is-primary is-large is-fullwidth">登录 <i class="fa fa-sign-in"
																						aria-hidden="true"></i></button>
					</form>
				</div>
				<p class="has-text-grey">
					<!-- <a href="../">注册</a> &nbsp;·&nbsp;-->
					<a href="{{basePath}}admin/chainlogin">区块链登录</a> &nbsp;·&nbsp;
					<a href="https://gitee.com/gpress/gpress" target="_blank">联系我们</a>
				</p>
			</div>
		</div>
	</div>
</section>
</body>
<script type="text/javascript">
	function encrypt() {
		document.getElementById('password').value = sha3_512(document.getElementById('password').value)
	}
	$(function() {
		let msg = $('#message').val()
		if (msg) {
			$.confirm({
				useBootstrap: false,
				boxWidth: '400px',
				title: '提示',
				content: msg,
				type: 'red',
				buttons: { '确定': function() {} }
			})
		}
	})

	sliderCaptcha({
		id: 'captcha',
		width: 300,
		height: 100,
		sliderL: 30,
		sliderR: 6,
		offset: 5,
		loadingText: '正在加载中...',
		failedText: '再试一次',
		barText: '向右滑动填充拼图',
		repeatIcon: 'fa fa-redo',
		onSuccess: function () {
			// $("#test").click()
			// $("#loginForm").submit()
			var loginForm = document.querySelector("#loginForm");
			fetch(loginForm.action, {
				method: loginForm.method,
				//body: JSON.stringify(serializeFormToObject(loginForm)),
				credentials:"same-origin",
				mode:"same-origin",
				body: new FormData(loginForm)
			}).then(function (response) {
				if (response.ok) {
					return response.json();
				}
				return Promise.reject(response);
			}).then(function(data) {
				console.log(data);
			}).catch(function (error) {
				console.warn(error);
			});
		},
		remoteUrl: "validate",
		verify: function (arr, url) {
			var ret = false;
			$.ajax({
				url: url,
				data: JSON.stringify(arr),
				async: false,
				cache: false,
				type: 'POST',
				contentType: 'application/json',
				dataType: 'json',
				success: function (result) {
					ret = result;
				}
			});
			return ret;
		}
	});
</script>
</html>
